const pages = document.querySelector('.header .home')
pages.addEventListener('click',function() {
    location.href='../html./header.html'
})









// --------------------------
// 这里选择了count你应该是想用冒泡
//但是后面根本没用上
const count = document.querySelector('.count')
count.addEventListener('click', function (e) {
    if (e.target.tagName === 'A') {
        let index = e.target.dataset.id
        if (index === '0') {
            document.querySelector('.message a').style.opacity = '1'
            document.querySelector('.users').style.display = 'block'
            document.querySelector('.qrcode div').style.display = 'none'
        } else if (index === '1') {
            document.querySelector('.message a').style.opacity = '0'
            document.querySelector('.users').style.display = 'none'
            document.querySelector('.qrcode div').style.display = 'block'
        }
    }
})
// -----------------------


const as = document.querySelectorAll('.count a')
for (let i = 0; i < as.length; i++) {
    as[i].addEventListener('click', function (e) {
        document.querySelector('.count a.active').classList.remove('active')
        e.target.classList.add('active')
        if (e.target.className === 'login1') {
            document.querySelector('form').classList.add('active')
            document.querySelector('.qrcode div').classList.remove('active')
        } else if (e.target.className === 'login2') {
            document.querySelector('form').classList.remove('active')
            document.querySelector('.qrcode div').classList.add('active')
        }
    })
}


const message = document.querySelector('.message')
message.addEventListener('click', function (e) {
    if (e.target.tagName === 'A') {
        let index = e.target.dataset.index
        if (index === '1') {
            document.querySelector('.loginEnter1').style.display = 'none'
            document.querySelector('.loginEnter2').style.display = 'block'
            document.querySelector('.users').style.display = 'none'
            document.querySelector('.num').style.display = 'block'
            document.querySelector('.setTimeout').style.opacity = '1'
            //    -------------------------------------------------
        } else if (index === '2') {
            document.querySelector('.loginEnter1').style.display = 'block'
            document.querySelector('.loginEnter2').style.display = 'none'
            document.querySelector('.users').style.display = 'block'
            document.querySelector('.num').style.display = 'none'
        }
    }
})


let timerId
let flag = true
const father = document.querySelector('.setTimeout2')
father.addEventListener('click', function (e) {
    if (e.target.className === 'setTimeout') {
        if (flag) {
            let time = 10
            e.target.innerHTML = `请等待${time}秒`
            flag = false
            timerId = setInterval(function () {
                time--
                e.target.innerHTML = `请等待${time}秒`
                if (time <= 0) {
                    e.target.innerHTML = '重新发送'
                    clearInterval(timerId)
                    flag = true
                }
            }, 1000)
        }

    }
})
// 验证用户名
let reg = /^[a-zA-Z0-9-_]{6,10}$/
const span = document.querySelectorAll('.warning')
const userName = document.querySelector('input.userName')
function verifyUsername() {
    if (userName.value === '') {
        span[0].style.opacity = '1'
        span[0].innerHTML = '用户名不能为空！'
        return false
    }
    else if (reg.test(userName.value)) {
        span[0].style.opacity = '0'
        return true
    } else {
        span[0].style.opacity = '1'
        span[0].innerHTML = '用户名不符合要求!'
        return false
    }

}
userName.addEventListener('blur', verifyUsername)
// 校验密码
let reg1 = /^[a-zA-Z0-9-_]{6,20}$/
const password = document.querySelector('input.code')
function verifyCode() {
    if (password.value === '') {
        span[1].style.opacity = '1'
        span[1].innerHTML = '密码不能为空！'
        return false
    }
    else if (reg1.test(password.value)) {
        span[1].style.opacity = 0
        return true
    } else {
        span[1].style.opacity = '1'
        span[1].innerHTML = '密码格式不符合要求!'
        return false
    }
}
password.addEventListener('blur', verifyCode)
// 验证复选框
const check = document.querySelector('input.check')
check.addEventListener('click', function () {
    if (check.checked) {
        span[2].style.opacity = 0
        return true

    } else {
        span[2].style.opacity = '1'
        span[2].innerHTML = '请勾选同意协议!'
        return false
    }
})
// 校验手机号
let reg2 = /^1[3-9]\d{9}/
const phone = document.querySelector('.phoneNumber')
function verifyPhone() {
    if (phone.value === ' ') {
        document.querySelector('.warningNumber').innerHTML = '手机号不能为空！'
        document.querySelector('.warning').style.opacity = '1'
        return false
    } else if (reg2.test(phone.value)) {
        document.querySelector('.warningNumber').innerHTML = ' '
        document.querySelector('.warning').style.opacity = '0'
        return true
    } else {
        document.querySelector('.warningNumber').innerHTML = '手机号不符合要求'
        document.querySelector('.warning').style.opacity = '1'
        return false
    }
}
phone.addEventListener('blur', verifyPhone)


// 校验验证码
let reg3 = /^\d{6}$/
const code1 = document.querySelector('.yzcode')
function verifyYzcode() {
    if (code1.value === ' ') {
        document.querySelector('.warningYzcode').innerHTML = '验证码不能为空！'
        document.querySelector('.warning').style.opacity = '1'
        return false
    } else if (reg3.test(code1.value)) {
        ocument.querySelector('.warningYzcode').innerHTML = ' '
        document.querySelector('.warning').style.opacity = '0'
        return true
    } else {
        document.querySelector('.warningYzcode').innerHTML = '验证码不符合要求！'
        document.querySelector('.warning').style.opacity = '1'
        return false
    }
}
code1.addEventListener('blur', verifyYzcode)


document.querySelector('.users').addEventListener('submit', function (e) {
    e.preventDefault()
    if (!verifyUsername()) {
        return
    } else if (!verifyCode()) {
        return
    } else if (!check.checked) {
        return
    } else {
        location.href = './header.html'
    }
})

document.querySelector('.num').addEventListener('sumbit', function (e) {
    e.preventDefault()
    if (!verifyPhone()) {
        return
    } else if (!verifyYzcode()) {
        return
    } else if (!check.checked) {
        return
    }
    else {
        location.href = './header.html'
    }
})
const yes = document.querySelector('.yes')
yes.addEventListener('click', function () {
    if (check.checked) {
        localStorage.setItem('text', userName.value)
        localStorage.setItem('pwd', password.value)
        location.href = './header.html'
    } else {
        alert('请勾选')
    }
})
const register = document.querySelector('.confirm')
register.addEventListener('click', function () {
    location.href='./register.html'
})